<!DOCTYPE HTML>
<html>
<!--
这个文档使用了百度上传图片插件
这个插件支持PHP，需要根据php的文件改为Python的格式
-->
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--
    <link rel="Bookmark" href="favicon.ico" >
    <link rel="Shortcut Icon" href="favicon.ico" />-->
    <!--[if lt IE 9]>
<script type="text/javascript" src="/static/backstage/lib/html5.js"></script>
<script type="text/javascript" src="/static/backstage/lib/respond.min.js"></script>
<![endif]-->
    <link rel="stylesheet" type="text/css" href="/static/backstage/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/static/h-ui.admin/css/style.css"/>
    <!-- 百度上传图片插件 -->
    <link rel="stylesheet" type="text/css" href="/static/backstage/lib/webuploader/0.1.5/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/backstage/lib/webuploader/0.1.5/demo.css">
    <!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>添加文章 - 文章管理</title>
    <meta name="keywords" content="caesar的个人博客后台页面">
    <meta name="description" content="caesar的个人博客后台页面">
</head>
<body>
<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-add">
        {% csrf_token %}
        <input type="hidden" id="picture" name="picture">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                <span class="c-red">*</span>
                {{ articleForm.title.label }}：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <!--自动生成输入框-->
                {{ articleForm.title }}
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                <span class="c-red">*</span>
                所属栏目：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 下拉选择器 -->
                <span class="select-box">
                    <!-- 下拉选择框 -->
                    <select name="category_id" class="select valid" aria-required="true" aria-invalid="false">
                        <!-- 下拉选项 -->
                        <option value="0">全部栏目</option>
                        {% for cate in cates %}
                            <option value="{{ cate.id }}">{{ cate.cate_name }}</option>
                        {% endfor %}
                    </select>
                </span>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                图片：
            </label>
            <!--dom结构部分  webupload插件的html代码-->
            <div class="formControls col-xs-8 col-sm-9">
                <div id="uploader" class="wu-example">
                    <div class="queueList">
                        <div id="dndArea" class="placeholder">
                            <div id="filePicker" class="webuploader-container">
                                <!-- 内部标签由JS控制 -->
                            </div>
                            <p>或将照片拖到这里，单次最多可选300张</p>
                        </div>
                    </div>
                    <div class="statusBar" style="display:none;">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div>
                        <div class="info">共0张（0B），已上传0张</div>
                        <div class="btns">
                            <div id="filePicker2">
                                <!-- 内部标签由JS控制 -->
                            </div>
                            <div class="uploadBtn state-pedding">开始上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                {{ articleForm.describles.label }}：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="describles" class="textarea valid" placeholder="文章描述" datatype="*10-100"
                          dragonfly="true" nullmsg="备注不能为空！"></textarea>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">属性：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="flag" type="radio" value="1" id="flag-1" checked>
                    <label for="sex-1">置顶</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="flag-2" value="2" name="flag">
                    <label for="sex-2">推荐</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="flag-3" value="3" name="flag">
                    <label for="sex-3">默认</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                {{ articleForm.tags.label }}：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="" id="tags" name="tags">
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                {{ articleForm.seo_title.label }}：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="" id="seo_title" name="seo_title">
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                {{ articleForm.seo_keyword.label }}：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="" id="seo_keyword" name="seo_keyword">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">
                {{ articleForm.seo_description.label }}：
            </label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="seo_description" class="textarea valid" placeholder="seo描述" datatype="*10-100"
                          dragonfly="true" nullmsg="备注不能为空！"></textarea>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">内容：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!--
                    编辑器承载的容器
                    只需要写一个容器，它内部的内容都在JS中封装好了
                    当页面加载之后会动态生成内部标签
                -->
                <div id="content" name="content"></div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!-- JQ脚本插件 -->
<script type="text/javascript" src="/static/backstage/lib/jquery/1.9.1/jquery.min.js"></script>
<!-- layer弹出框脚本插件 -->
<script type="text/javascript" src="/static/backstage/lib/layer/2.4/layer.js"></script>
<!-- H-ui 脚本插件 -->
<script type="text/javascript" src="/static/backstage/static/h-ui/js/H-ui.js"></script>
<!-- H-ui 后台管理页面脚本插件 -->
<script type="text/javascript" src="/static/backstage/static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<!-- JQ表单验证脚本插件 -->
<script type="text/javascript" src="/static/backstage/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<!-- JQ表单验证配置脚本插件 -->
<script type="text/javascript" src="/static/backstage/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<!-- JQ表单验证字体脚本插件（支持验证中文） -->
<script type="text/javascript" src="/static/backstage/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!-- 百度webupload图片上传插件 -->
<script type="text/javascript" src="/static/backstage/lib/webuploader/0.1.5/webuploader.js"></script>
<!-- 两个插件JS文件中间需要添加全局的站点信息 -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '/';
</script>
<!-- 百度webupload图片上传插件 -->
<script type="text/javascript" src="/static/backstage/lib/webuploader/0.1.5/demo.js"></script>
<!-- 验证form表单脚本 -->
<script type="text/javascript">
    $(function () {
        // validate 插件 用于验证form表单 ..   validate会对form表单进行初始化操作
        $("#form-add").validate({
            // 这里只对文章的标题的名称做了验证
            rules: {
                title: {
                    // 必须的
                    required: true,
                    // 最小长度
                    minlength: 1,
                    // 最大长度
                    maxlength: 20
                }
            },
            // 是否监听键盘
            onkeyup: false,
            // 清除焦点
            focusCleanup: true,
            // 成功时调用的插件
            success: "valid",
            // 点击提交按钮的时候触发的函数
            submitHandler: function (form) {
                var formData = new FormData(form);
                $.ajax({
                    type: "post",
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    async: false,
                    error: function (e) {
                    },
                    success: function (data) {
                        var num = 6;  // 控制哭脸 或者笑脸
                        var time = 2000;  // 控制延迟
                        if (data.code > 0) {
                            num = 5;
                            time = 2000
                        }
                        // 弹出提示消息
                        // 第一个参数：弹出的消息
                        // 第二个参数：是一个对象，设置图标和延迟时间单位毫秒
                        // 第三个参数（函数）：当弹出结束时触发 此参数
                        layer.msg(data.msg, {icon: num, time: time}, function () {
                            if (data.code == 0) {
                                // 获取父窗口的弹出框标识
                                var index = parent.layer.getFrameIndex(window.name);
                                // 刷新父窗口
                                parent.location.reload();
                                // 根据弹出框的标识---关闭父窗口的弹出框
                                parent.layer.close(index);
                            }
                        })

                    }
                });

            }
        });
    });
</script>
<!--
    百度编辑器配置插件，默认的配置文件是PHP，需要更改
    *服务器统一请求接口路径*
    这里之前是PHP文件
    , serverUrl: URL + "/manager/fileupload/"
    修改完成后，需要在后台的路由文件中增加一个路由
-->
<script type="text/javascript" src="/static/backstage/lib/ueditor/1.4.3/ueditor.config.js"></script>
<!-- 百度编辑器全局核心插件 -->
<script type="text/javascript" src="/static/backstage/lib/ueditor/1.4.3/ueditor.all.js"></script>

<!-- 实例化百度ueditor编辑器脚本 -->
<script type="text/javascript">
    /*
    执行完上面的逻辑流程之后，在下方实例化上面的编辑器逻辑
    向容器内动态添加编辑器的html功能代码
    */
    var ue = UE.getEditor('content', {
        initialFrameWidth: "100%"
    });
</script>
<!-- 百度Web uploader图片上传实例化脚本 -->
<script>

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>